<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/view/common/kendocommon.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <title>客户服务记录</title>
    <meta charset="utf-8">
    <style>
    	table{font-size:12px}
    </style>
    <script>
        $(document).ready(function() {
        	
        	$(".various").fancybox({
        		maxWidth	: 1000,
        		maxHeight	: 700,
        		fitToView	: false,
        		width		: '80%',
        		height		: '80%',
        		autoSize	: false,
        		closeClick	: false,
        		openEffect	: 'none',
        		closeEffect	: 'none'
        	});
        	
        	$("#toolbar").kendoToolBar({
	            resizable: false,
	            items: [
	            	{ type: "separator" },
	            	//{ template: "<label>用户:</label><input name='userName' id='userName' class='k-textbox'>" },
	                { template: "<label>时间:</label><input name='date_from' id='date_from'>" },
	                { template: "<label>-</label><input name='date_to' id='date_to'>" },
	                { template: "<label>宝宝名</label><input name='baby_name' id='baby_name'>" },
	                { template: "<label>预约手机号</label><input name='phone' id='phone'>" },
	                { type: "separator" },
	                { type: "button", text: "查询",click: queryCustomerList }
	            ]
	        });
	        
            dataSource = new kendo.data.DataSource({
                transport: {
                    read:  {
                        url: "${path}/assist/queryCustomerServerList",
                        dataType: "json",
                        data: function() {
					        return {
					         	date_from:$('#date_from').val(),
					         	date_to:$('#date_to').val(),
					         	baby_name:$('#baby_name').val(),
					         	phone:$('#phone').val()
					         	//userName:$('#userName').val()
					        };
					    }
                    }
                },
                //group: [{field: "deptName"}],
                serverPaging: true,
                //serverSorting: true,
                serverFiltering: true,
                pageSize: 15,
                schema: {
                	data:"data",
               		total:"total"
                }
            });
            
            $("#grid").kendoGrid({
                dataSource: dataSource,
                //pageable: true,
                pageable: {
					refresh: true,
					pageSizes: true,
					buttonCount: 5,
					page: 1,
					pageSize: 10,
					pageSizes: [10, 20, 30],
					messages: {
						display: "显示 {0}-{1} 共 {2} 项",
						empty: "没有数据",
						itemsPerPage: "每面显示数量",
						first: "第一页",
						last: "最后一页",
						next: "下一页",
						previous: "上一页"
					}
				},
                selectable: "multiple row",
                allowCopy: true,
                groupable: {
                    messages: {
                      empty: "将列拖拽到此处进行分类查看"
                    }
                },
                editable: "popup",
                columns: [
                	//{ field:"id", template: "<input type='checkbox' id='#:id#' />",width: "120px",headerTemplate: '<input type="checkbox" id="check-all" />'},
                    { field:"memberType", title: "是否会员",width: "80px",template:checkMemberTemp},
                    { field:"member_number", title:"会员号",  width: "180px"},//format: "{0:c}",locked: true,
                    { field:"baby_name", title: "会员名",width: "120px",template:queryCustomerTemp},
                    //{ field:"attend_time", title: "日期",width: "120px"},
                    { field:"course_start_time", title: "服务时间",width: "120px"},
                    { field:"servername", title: "服务内容",width: "250px"},
                    { field:"zj_name", title: "任课辅导员",width: "150px"},
                    { field:"fj_name", title: "助教",width: "120px"},
                    { command: [{name:"getComment",text:"查看评论",click:getComment},{name:"comment",text:"评论",click:comment}], 
                        attributes:{style:"text-align:center"},headerAttributes:{style:"text-align:center"},title: "操作", width: "250px" }
                  
                    //{ field: "UnitsInStock", title:"Units In Stock", width:"120px"},//,format:"{0:yyyy/MM/dd}"
                    //{ command: [{name:"editrow",text:"<span class='k-icon k-edit'></span>查看",click:queryCustomerInfo,buttonType:"ImageAndText"}], title: "操作", width: "100px" }
                    ]
            });
            
            $('#grid').css("height",document.body.clientHeight-40);
            $("#date_from").kendoDatePicker({format: "yyyy-MM-dd"});
            $("#date_to").kendoDatePicker({format: "yyyy-MM-dd"});
		});
		
		var queryCustomerTemp = function(dataItem){//查询客户信息
			return "<a href='${path}/assist/memberInfo?c_user_id="+dataItem.c_user_id+"' style='color:#000' class='various' data-fancybox-type='iframe' title='会员信息'>" + dataItem.baby_name + "</a>";
		}
		
		var checkMemberTemp = function(dataItem){
			var retStr = "";
			switch(dataItem.memberType){
				case "0":retStr = "注册会员";break;
				case "1":retStr = "充值会员";break;
				case "2":retStr = "会员";break;
			}
			return retStr;
		}
		
		var queryCustomerList = function(e){//查询
			//$("#grid").data("kendoGrid").dataSource.read({date_from:$('#date_from').val(),date_to:$('#date_to').val()});
			//$("#grid").data("kendoGrid").dataSource.filter([{field:"date_from",operator: "eq",value:$('#date_from').val()},
			//	{field:"date_to",operator: "eq",value:$('#date_to').val()}]);
			$("#grid").data("kendoGrid").dataSource.fetch();
			$("#grid").data("kendoGrid").dataSource.page(1);
		}
		
		var toolbarTemp = function(dataItem){
			return "<label>时间:</label><input name='querydate' id='querydate' class='k-textbox'>";
		}
		
		var selectTemp = function(dataItem){
			return "<label>是否会员:</label><select id='isMember' name='isMember'>"+
                		"<option value ='' selected='selected'></option>"+
                		"<option value ='1'>是</option>"+
                		"<option value ='0'>否</option>"+
		            "</select>";
		}
		
		var queryCustomerInfo = function(e){
			var grid = $("#grid").data("kendoGrid");
			e.preventDefault();
            var data = grid.dataItem($(e.currentTarget).closest("tr"));
            setFormData(data);
			$.fancybox($("#inlineForm"));
		    //var dInfo = dialog({
			//	title: '消息',
			//	content: document.getElementById("inlineForm")
		    //})
			//dInfo.showModal();
		}
		
		var setFormData = function(data){
			$('#baby_name').val(data.baby_name);
		}
		

		 var layer2;
	        var comment=function(e){
	     	
	        	layer2=layer.prompt({
	           	    formType: 2,
	           	    title: '请输入回复'
	           	}, function(value, index, elem){
	           		CommentAjax(value,e);
	           	});

	        }
	        
	        var CommentAjax=function(value,e){
	        	//console.log('CommentAjax');
	        	
	        	var grid = $("#grid").data("kendoGrid");
	            var data = grid.dataItem($(e.currentTarget).closest("tr"));
	    
				$.ajax({
	   			 	url: "${path}/assist/reComment",    //请求的url地址
	   			 	dataType: "json",   //返回格式为json
	   			 	async: true, //请求是否异步，默认为异步，这也是ajax重要特性
	   			 	data: { "toUserID":data.c_user_id,"toUserName":data.user_name,
	   			 		"toUserType":"3","fromUserType":"2",
	   			 		"comment":value,"serviceID":data.course_open_detailID,"businessTypeCode":"1002",
	   			 		"serviceModuleCode":"3"},    //参数值
	   			 	//type: "jsonp",   //请求方式
	   			 	
	   			 	//,"fromUserID":"userID","fromUserName":"花花"
	   			 	beforeSend: function() {
	      			  //请求前的处理
	   			 	},
	   			 	success: function(req) {

		   			 	if(req.status=='1'){
		   			 		layer.msg('评论成功', {time: 3000, icon:6});
		   					$("#grid").data("kendoGrid").dataSource.fetch();
		   					
		   			 	}
		   			 layer.close(layer2);
					}
				});
	        }

		var getComment=function(e){
			
			var grid = $("#grid").data("kendoGrid");
	//		e.preventDefault();
            var data = grid.dataItem($(e.currentTarget).closest("tr"));
            //setFormData(data);
            $('#commentlist').attr('href','${path}/assist/m3commentList?c_user_id='+data.c_user_id);
			$.fancybox($("#commentlist"));
		}
		
    </script>
</head>
<body>
	<div id="toolbar" style="margin:2px"></div>
    <div id="grid" style="margin:2px;font-size:10px"></div>
    
    
    <div style="display: none;">		
		<div id="inlineForm" style="width:600px;overflow:auto;">
			<table>
                <tr>
                    <td style="width:100px;padding:5px">
                        <span  style="width:90px">客户名字</span>
                    </td>
                    <td style="width:220px;padding:5px">
                    	<input type="text" placeholder="标题" name="baby_name" id="baby_name"
                    		 style="width:200px" class="k-textbox" >
                    </td>
                    <td colspan="3" style="padding:5px" style="width:320px">
                    </td>
                </tr>
                
                <tr>
                    <td style="padding:5px">
                        <span  style="width:90px">开始日期</span>
                    </td>
                    <td style="padding:5px">
                        <input name="starttime" id="starttime" style="width:200px" class="k-textbox">
                    </td>
                    
                    <td style="padding:5px">
                        <span  style="width:90px">完成时间</span>
                    </td>
                    <td style="padding:5px">
                        <input style="width:200px" name="endtime" id="endtime" class="k-textbox">
                    </td>
                </tr>
                <tr>
                    <td style="width:100px;padding:5px">
                        <span  style="width:90px">内容</span>
                    </td>
                    <td colspan="3" style="padding:5px">
                        <textarea name="content" id="content" style="width:480px;height:200px" class="k-textbox"></textarea>
                    </td>
                </tr>
            </table>
		</div>
	</div>
     <a href="${path}/assist/commentList" class="fancybox fancybox.iframe" id="commentlist" title="查看评论" style="display:none"></a>
   
</body>
</html>
